<script setup lang="ts">
import {Dayjs} from "dayjs";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

// 操作记录
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'plan',
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  dates: {
    type: Array as PropType<Dayjs[]>,
    default: () => [],
  },
});
const dateRange = ref<Dayjs[]>(props.dates);
const visible = ref(false);
const handle = () => {
  loadData(0, 40);
  visible.value = true;
}
const dataSource = ref<any[]>([]);
const loading = ref(false);
const loadData = (startOffset: number = 0, pageSize: number = 40) => {
  let campaignIdList: any[] | undefined = undefined;
  if (props.rows.length) {
    campaignIdList = props.rows.map((r: any) => r.campaignId)
  } else {
    campaignIdList = undefined
  }
  if (startOffset === 0) {
    dataSource.value = [];
  }
  if (dateRange.value.length === 0) {
    return;
  }
  const startTime: string = dateRange.value[0].format('YYYY-MM-DD');
  const endTime: string = dateRange.value[1].format('YYYY-MM-DD');
  let entityTypeGroupCode: string | undefined = 'campaign';
  if (props.type === 'unit') {
    entityTypeGroupCode = 'adgroup';
  }
  WxtUtils.oplogFindList(startTime, endTime, props.bizCode, props.type === 'plan'?campaignIdList:undefined, startOffset, pageSize,entityTypeGroupCode,{
    adgroupIdList: props.type === 'unit'?props.rows.map((r: any) => r.adgroupId):undefined,
  }).then(res => {
    const currCount = dataSource.value.length;
    if (res.data.data.list.length === pageSize) {
      loadData(startOffset + pageSize, pageSize);
    }
    dataSource.value = dataSource.value.concat(res.data.data.list.map((item: any, index: number) => {
      item.index = index + 1 + currCount;
      return item;
    }));
  })
}
const columns = [
  {
    dataIndex: 'index',
    title: '#',
    width: 50,
  },
  {
    dataIndex: 'operTime',
    title: '操作时间',
    width: 200,
  },
  {
    dataIndex: 'operName',
    title: '操作人',
    width: 160,
  },
  {
    dataIndex: 'operPlatformName',
    title: '操作平台',
    width: 100,
  },
  {
    dataIndex: 'entityTypeGroupName',
    title: '操作对象',
    width: 100,
  },
  {
    dataIndex: 'operationGroupName',
    title: '操作类型',
    width: 200,
  },
  {
    dataIndex: 'content',
    title: '操作内容',
    tooltip: true,
  }
]
const tableBox = ref<HTMLDivElement | null>(null);
const tableHeight = ref(0);
watch(() => tableBox.value, (val) => {
  if (val) {
    tableHeight.value = val.clientHeight - 85;
  }
})
onMounted(() => {
  tableHeight.value = tableBox.value?.offsetHeight - 85 || 0;
  window.addEventListener('resize', () => {
    tableHeight.value = tableBox.value?.offsetHeight - 85 || 0;
  });
})
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    tableHeight.value = tableBox.value?.offsetHeight - 85 || 0;
  });
});
</script>

<template>
  <div @click="handle">
    <slot>
      <a-button size="small" type="primary" ghost>操作记录</a-button>
    </slot>
  </div>
  <wxt-modal title="操作记录" width="95%" v-model:visible="visible">
    <div ref="tableBox" style="height: calc(100vh - 105px)">
      <base-table :scroll="{
      y: tableHeight
      }" table-name="操作记录" :loading="loading" :columns="columns" :data-source="dataSource"
      >
        <template #toolbar>
          <a-space>
            <DateRangeSelection name="日期" v-model:value="dateRange" @change="loadData(0)" :allowClear="false"/>
          </a-space>
        </template>
      </base-table>
    </div>
  </wxt-modal>
</template>

<style scoped>

</style>
